<template>
    <div class="container">
        <h2 style="text-align: center">{{ page === 'index' ? '简介管理' : '快报管理' }}</h2>
        <el-row class="image-row">
            <div v-for="item in indexImageList" :key="item" class="elcol">
                <el-image
                    style="width: 600px; height: 400px"
                    :src="item"
                    :preview-src-list="indexImageList"
                    :hide-on-click-modal="true"
                    fit="contain"
                ></el-image
                ><el-button type="danger" @click="removeIndexImage(item)">删除</el-button>
            </div>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top: 20px">
            <el-upload ref="upload" drag :action="'api/admin/' + page" multiple :on-success="fetch">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处<em>上传</em>，或<em>点击上传</em><br />只能上传 jpg/jpeg/png/bmp 文件，支持多选</div>
            </el-upload>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import axios from 'utils/axios.js'
import { ElMessageBox, ElMessage } from 'element-plus'

const indexImageList = ref([])
const upload = ref(null)

onMounted(() => {
    fetch()
})

const props = defineProps({
    page: {
        type: String,
        default: 'index',
    },
})

const removeIndexImage = async imageName => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '危险', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            const res = await axios.delete(`/admin/image/${imageName}`)
            if (res && res.code === 0) {
                fetch()
                ElMessage.success('删除成功')
            }
        })
        .catch(() => {})
}

const fetch = () => {
    upload.value.clearFiles()
    setTimeout(async () => {
        const res = await axios.get(`/imageList/${props.page}`)
        indexImageList.value = res.data
    }, 1000)
}
</script>

<style scoped>
.elcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 10px;
    box-sizing: border-box;
}
.el-button {
    margin-top: 10px;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.image-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
</style>
